﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">
	<form name="humanfileForm" method="post" action="position_change_update.html">
		<table width="100%">
			@* <tr>
			<td>
			<font color="black">您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布登记 </font>
			</td>
			</tr>  *@
			<tr>
				<td align="right">
					<el-button v-on:click="tj">保存</el-button>
					<el-button v-on:click="qk">清空</el-button>
				</td>
			</tr>
		</table>
		<table width="100%" border="1" cellpadding=0 cellspacing=1
			   bordercolorlight=#848284 bordercolordark=#eeeeee
			   class="TABLE_STYLE1">
			<tr>
				<td class="TD_STYLE1" width="11%">
					I级机构
				</td>
				<td width="14%" class="TD_STYLE2">

					<el-select v-model="obj1.yjjg" placeholder="--请选择--" class="aaa">
						<el-option v-for="item in options1"
								   :key="item.first_kind_id"
								   :label="item.first_kind_name"
								   :value="item.first_kind_id+item.first_kind_name"
								   v-on:click="jly(item.first_kind_id)" />
					</el-select>
				</td>
				<td width="11%" class="TD_STYLE1">
					II级机构
				</td>
				<td width="14%" class="TD_STYLE2">
					<el-select v-model="obj1.ejjg" placeholder="--请选择--" class="aaa">
						<el-option v-for="item in options5"
								   :key="item.second_kind_id "
								   :label="item.second_kind_name"
								   :value="item.second_kind_id +item.second_kind_name"
								   v-on:click="jle(item.second_kind_id)" />
					</el-select>
				</td>
				<td width="11%" class="TD_STYLE1">
					III级机构
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="obj1.sjjg" placeholder="--请选择--" class="aaa">
						<el-option v-for="item in options2"
								   :key="item.third_kind_id"
								   :label="item.third_kind_name"
								   :value="item.third_kind_id+item.third_kind_name" />
					</el-select>
				</td>
				<td width="11%" class="TD_STYLE1">
					招聘类型
				</td>
				<td class="TD_STYLE2" colspan="2">
					<el-select v-model="obj.zplx" placeholder="--请选择--" class="aaa">
						<el-option v-for="item in options"
								   :key="item.value"
								   :label="item.label"
								   :value="item.label" />
					</el-select>

				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					职位分类
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="obj1.zwfl" placeholder="--请选择--" class="aaa">
						<el-option v-for="item in options3"
								   :key="item.major_kind_id"
								   :label="item.major_kind_name"
								   :value="item.major_kind_id+item.major_kind_name"
								   v-on:click="jls(item.major_kind_id)" />
					</el-select>
				</td>
				<td class="TD_STYLE1">
					职位名称
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="obj1.zwmc" placeholder="--请选择--" class="aaa">
						<el-option v-for="item in options4"
								   :key="item.major_Id"
								   :label="item.major_name"
								   :value="item.major_id+item.major_name" />
					</el-select>
				</td>
				<td class="TD_STYLE1">
					招聘人数
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="obj.zprs" class="aaa"></el-input>
				</td>
				<td class="TD_STYLE1">
					截止日期
				</td>
				<td class="TD_STYLE2">
					<el-date-picker v-model="obj.jzrq"
									type="date"
									placeholder="选择日期">
					</el-date-picker>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					登记人
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="obj.djr" class="aaa" name="emajorRelease.register"></el-input>
				</td>

				<td class="TD_STYLE1">
					登记时间
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="obj.djsj" class="aaa"></el-input>
				</td>
				<td>&nbsp; </td>
				<td>&nbsp; </td>
				<td>&nbsp; </td>
				<td>&nbsp; </td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					职位描述
				</td>
				<td class="TD_STYLE2" colspan="8">
					<textarea v-model="obj.zwms" name="emajorRelease.major_describe" rows="4" cols="80" class="TEXTAREA_STYLE1"></textarea>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					招聘要求
				</td>
				<td class="TD_STYLE2" colspan="8">
					<textarea v-model="obj.zpyq" name="emajorRelease.engage_required" rows="4" cols="80" class="TEXTAREA_STYLE1"></textarea>
				</td>
			</tr>
		</table>
	</form>
</div>
<script type="text/javascript">
	var { createApp, reactive, ref, computed, watchEffect } = Vue
	var app = createApp({
		setup() {
			const uName = computed(() => {
				return sessionStorage.getItem('u');
			})
			console.log(uName);
			//下拉列表绑定的字段
			let obj1 = reactive({
				yjjg: "",
				ejjg: "",
				sjjg: "",
				zwfl: "",
				zwmc: ""
			})
			//添加数据的字段
			let obj = reactive({
				yjjgid: "",
				yjjg: "",
				ejjgid: "",
				ejjg: "",
				sjjgid: "",
				sjjg: "",
				zwflid: "",
				zwfl: "",
				zwmcid: "",
				zwmc: "",
				zprs: "",
				jzrq: "",
				djr: "",
				djsj: "",
				zwms: "",
				zpyq: "",
				zplx: ""
			});
			//获取当前时间
			obj.djsj = ref(new Date().toLocaleString());

			// 如果你想要实时更新时间，可以使用watchEffect或setInterval
			watchEffect(() => {
				const interval = setInterval(() => {
					obj.djsj = new Date().toLocaleString();
				}, 1000);
			});
			//登记人
			obj.djr = uName;
			//下拉列表数据的绑定
			const options1 = ref();
			const options2 = ref();

			const options3 = ref();
			const options4 = ref();
			const options5 = ref();
			axios.post('/GetCFFK')
				.then(function (response) {
					console.log(response.data);
					options1.value = response.data;
				})

			axios.post('/GetCMK')
				.then(function (response) {
					console.log(response.data);
					options3.value = response.data;
				})


			// const fetchData = () => {
			// 	// 获取存储的res.data值
			// 	const responseDataString = sessionStorage.getItem('User');
			// 	if (responseDataString) {

			// 		// 将存储的字符串转换回数组
			// 		const responseDataArray = JSON.parse(responseDataString);

			// 		// 现在您可以访问responseDataArray数组中的元素
			// 		uName.value = responseDataArray.uName;
			// 	} else {
			// 		console.log("未找到存储的值");
			// 	}
			// };
			// fetchData();

			//添加操作
			function tj() {
				console.log(obj1.zwmc)
				//将id与name分开
				obj.ejjgid = obj1.ejjg.slice(0, 2);
				obj.ejjg = obj1.ejjg.slice(2, 20);
				obj.yjjgid = obj1.yjjg.slice(0, 2);
				obj.yjjg = obj1.yjjg.slice(2, 20);
				obj.sjjgid = obj1.sjjg.slice(0, 2);
				obj.sjjg = obj1.sjjg.slice(2, 20);
				obj.zwflid = obj1.zwfl.slice(0, 2);
				obj.zwfl = obj1.zwfl.slice(2, 20);
				obj.zwmcid = obj1.zwmc.slice(0, 2);
				obj.zwmc = obj1.zwmc.slice(2, 20);
				console.log("111");
				console.log(obj);
				//执行添加
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/AddEMR', {
					first_kind_id: obj.yjjgid,
					first_kind_name: obj.yjjg,
					second_kind_id: obj.ejjgid,
					Second_kind_name: obj.ejjg,
					Major_kind_id: obj.zwflid,
					Major_kind_name: obj.zwfl,
					Third_kind_id: obj.sjjgid,
					Third_kind_name: obj.sjjg,
					Major_Id: obj.zwmcid,
					Major_name: obj.zwmc,
					Human_amount: obj.zprs,
					Engage_type: obj.zplx,
					deadline: obj.jzrq,
					Register: obj.djr,
					RegistTime: obj.djsj,
					Major_describe: obj.zwms,
					Engage_required: obj.zpyq
				}).then(function (response) {
					if (response.data > 0) {
						alert("成功");
						qk();
					} else {
						alert("失败");
					}

				})
			}
			function qk() {
				obj.yjjgid = "";
				obj.yjjg = "";
				obj.ejjgid = "";
				obj.ejjg = "";
				obj.sjjgid = "";
				obj.sjjg = "";
				obj.zwflid = "";
				obj.zwfl = "";
				obj.zwmcid = "";
				obj.zwmc = "";
				obj.zprs = "";
				obj.jzrq = "";
				obj.djr = "";
				obj.djsj = "";
				obj.zwms = "";
				obj.zpyq = "";
				obj.zplx = "";
				obj1.yjjg = "--请选择--";
				obj1.ejjg = "--请选择--";
				obj1.sjjg = "--请选择--";
				obj1.zwfl = "--请选择--";
				obj1.zwmc = "--请选择--"
			}
			//点击一级下拉框，出现二级
			function jly(zhi) {
				console.log(zhi);
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.get(`/GetCFSKById/${zhi}`).then(response => {
					options5.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}
			//点击二级下拉框，出现三级
			function jle(zhi) {
				console.log(zhi);
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/GetCFTKById', {
					id: zhi
				}).then(response => {
					options2.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}
			//点击一级下拉框，出现二级
			function jls(zhi) {
				console.log(zhi);
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/GetCMById/' + zhi).then(response => {
					options4.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
			}
			return {
				options1,
				options2,
				options3,
				options4,
				options5,
				obj,
				obj1,
				tj,
				uName,
				qk,
				jly,
				jle,
				jls,
				//下拉列表给的死值
				options: [{
					value: '选项1',
					label: '校园招聘'
				}, {
					value: '选项2',
					label: '社会招聘'
				}],
			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app")
</script>
<style>
	/* CSS Document */
	* {
		FONT-FAMILY: 微软雅黑;
	}

	.resizeDivClass {
		position: relative;
		background-color: #DEDBD6;
		width: 2;
		z-index: 1;
		left: expression(this.parentElement.offsetWidth-1);
		cursor: e-resize;
	}

	A:visited {
		TEXT-DECORATION: none
	}

	A:active {
		TEXT-DECORATION: none
	}

	A:hover {
		TEXT-DECORATION: underline overline
	}

	A:link {
		TEXT-DECORATION: none
	}

	.t {
		LINE-HEIGHT: 1.4
	}

	BODY {
		background-color: #FFFFCC;
		FONT-SIZE: 10pt;
		SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
		SCROLLBAR-SHADOW-COLOR: buttonface;
		SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
		SCROLLBAR-TRACK-COLOR: #eeeeee;
		SCROLLBAR-DARKSHADOW-COLOR: buttonshadow;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	DIV {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	FORM {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	OPTION {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	P {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	BR {
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	TEXTAREA {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	SELECT {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	.gray {
		CURSOR: pointer;
		FILTER: gray
	}

	.style3 {
		font-size: 16px;
		font-weight: bold;
	}

	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_STYLE2 {
		width: 100%;
	}

	.ALL-STYLE {
		border: 1px ridge #666666;
		border-color: #DEDBD6;
	}

	.TR_STYLE1 {
	}

	.style8 {
		color: #000066
	}



	.TD_HANDBOOK_STYLE1 {
		vertical-align: top;
		width: 100%;
		color: #0000FF;
	}

	.TD_STYLE1 {
		border-width: 1;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	.TD_STYLE3 {
	}

	.SUBMIT_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.BUTTON_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RESET_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RADIO_STYLE1 {
	}

	.CHECKBOX_STYLE1 {
	}

	.SELECT_STYLE1 {
		width: 100%;
	}

	.SELECT_STYLE2 {
		width: 30%;
	}

	.TEXTAREA_STYLE1 {
		width: 100%;
	}

	.DIV_STYLE1 {
		float: right;
		vertical-align: top;
	}

	.DIV_STYLE2 {
		float: center;
		vertical-align: top;
	}

	.INPUT_STYLE1 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 30%
	}

	.INPUT_STYLE2 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 100%
	}

	.FILE_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseout {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseover {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mousedown {
		BORDER-RIGHT: #FFE400 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #FFE400 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #FFE400 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #FFE400 1px solid
	}

	.btn3_mouseup {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.custom-select .el-input__inner {
		background-color: transparent;
		border: 1px solid #ccc; /* 或者其他你想要的边框颜色 */
	}
</style>
<style>
	body {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: .8em;
	}

	/* the div that holds the date picker calendar */
	.dpDiv {
	}


	/* the table (within the div) that holds the date picker calendar */
	.dpTable {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: center;
		color: #505050;
		background-color: #ece9d8;
		border: 1px solid #AAAAAA;
	}


	/* a table row that holds date numbers (either blank or 1-31) */
	.dpTR {
	}


	/* the top table row that holds the month, year, and forward/backward buttons */
	.dpTitleTR {
	}


	/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTR {
	}


	/* the bottom table row, that has the "This Month" and "Close" buttons */
	.dpTodayButtonTR {
	}


	/* a table cell that holds a date number (either blank or 1-31) */
	.dpTD {
		border: 1px solid #ece9d8;
	}


	/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlightTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
	}


	/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
	.dpTDHover {
		background-color: #aca998;
		border: 1px solid #888888;
		cursor: pointer;
		color: red;
	}


	/* the table cell that holds the name of the month and the year */
	.dpTitleTD {
	}


	/* a table cell that holds one of the forward/backward buttons */
	.dpButtonTD {
	}


	/* the table cell that holds the "This Month" or "Close" button at the bottom */
	.dpTodayButtonTD {
	}


	/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
		color: white;
	}


	/* additional style information for the text that indicates the month and year */
	.dpTitleText {
		font-size: 12px;
		color: gray;
		font-weight: bold;
	}


	/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlight {
		color: 4060ff;
		font-weight: bold;
	}


	/* the forward/backward buttons at the top */
	.dpButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
		padding: 0px;
	}


	/* the "This Month" and "Close" buttons at the bottom */
	.dpTodayButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
	}
</style>
<style>
</style>




